<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        button{
            font-size: 25px;
            padding: 0px;
            width:30px ;
            height: 30px;
            background: darkgrey;
        }
    </style>

    <script>


        /**
         * 检查 横着, 竖着, 左斜, 右斜
         * @param prepare 棋牌
         * @param row 行
         * @param cols 列
         * @param flag  甲方 | 乙方
         * @return
         */
        function checkIsSuccess(prepare, row, cols, flag) {
            return checkRow(prepare, row, flag) || checkCols(prepare, cols, flag) || checkLeft(prepare, row, cols, flag) || checkRight(prepare, row, cols, flag);

        }

        /**
         * 检查右斜
         * @param prepare
         * @param row
         * @param cols
         * @param flag
         * @return
         */
        function checkRight(prepare, row, cols, flag) {

            var startRow = row;
            var startCols = cols;
            while (true) {
                if (startRow == prepare.length - 1 || startCols == 0) {
                    break;
                }
                startRow++;
                startCols--;
            }
            var countJia = 0;
            var countYi = 0;
            while (true) {
                if (flag && prepare[startRow][startCols] == "1") {
                    countJia++;
                    if (countJia == 5) {
                        break;
                    }
                } else {
                    countJia = 0;
                }
                if (!flag && prepare[startRow][startCols] == "2") {
                    countYi++;
                    if (countYi == 5) {
                        break;
                    }
                } else {
                    countYi = 0;
                }
                startRow--;
                startCols++;
                if (startRow < 0 || startCols >= prepare.length) {
                    break;
                }
            }

            if (flag) {
                return countJia >= 5;
            } else {
                return countYi >= 5;
            }
        }

        /**
         * 检查左斜
         * @param prepare
         * @param row
         * @param cols
         * @param flag
         * @return
         */
        function checkLeft(prepare, row, cols, flag) {
            var startRow = row;
            var startCols = cols;
            while (true) {
                if (startRow == 0 || startCols == 0) {
                    break;
                }
                startRow--;
                startCols--;
            }
            var countJia = 0;
            var countYi = 0;
            while (true) {
                if (flag && prepare[startRow][startCols] == "1") {
                    countJia++;
                    if (countJia == 5) {
                        break;
                    }
                } else {
                    countJia = 0;
                }
                if (!flag && prepare[startRow][startCols] == "2") {
                    countYi++;
                    if (countYi == 5) {
                        break;
                    }
                } else {
                    countYi = 0;
                }
                startRow++;
                startCols++;
                if (startRow >= prepare.length || startCols >= prepare.length) {
                    break;
                }
            }

            if (flag) {
                return countJia >= 5;
            } else {
                return countYi >= 5;
            }

        }

        /**
         * 检查竖着
         * @param prepare
         * @param cols
         * @param flag
         * @return
         */
        function checkCols(prepare, cols, flag) {

            var countJia = 0;
            var countYi = 0;
            for (var i = 0; i < prepare.length; i++) {
                if (flag && prepare[i][cols] == "1") {
                    countJia++;
                    if (countJia == 5) {
                        break;
                    }
                } else {
                    countJia = 0;
                }

                if (!flag && prepare[i][cols] == "2") {
                    countYi++;
                    if (countYi == 5) {
                        break;
                    }
                } else {
                    countYi = 0;
                }
            }
            if (flag) {
                return countJia >= 5;
            } else {
                return countYi >= 5;
            }

        }

        /**
         * 检查横着
         * @param prepare
         * @param row
         * @param flag
         * @return
         */
        function checkRow(prepare, row, flag) {

            var arr = prepare[row];
            var countJia = 0;
            var countYi = 0;
            for (var i = 0; i < arr.length; i++) {
                if (flag && arr[i] == "1") {
                    countJia++;
                    if (countJia == 5) {
                        break;
                    }
                } else {
                    countJia = 0;
                }
                if (!flag && arr[i] == "2") {
                    countYi++;
                    if (countYi == 5) {
                        break;
                    }
                } else {
                    countYi = 0;
                }
            }
            if (flag) {
                return countJia >= 5;
            } else {
                return countYi >= 5;
            }

        }

        function show(prepare){
            //准备棋牌
            var content = document.getElementById("content");
            var str = "";
            for (var i = 0; i < 20; i++) {
                prepare[i] = [];
                str += "<div>";
                for (var j = 0; j < 20; j++) {
                    var but = "<button row=" + i + " cols=" + j + ">+</button>"
                    str += but;
                    //prepare[i][j] = "0";
                }
                str += "</div>"
            }
            content.innerHTML = str;
        }
        window.onload = function () {
            var prepare = [];
            //展示画面
            show(prepare)
            //添加事件
            addEvent(prepare);

        }

        function  addEvent(prepare){
            //定义变量来去记录轮到哪一方开始下棋
            var flag = true;
            //给所有按钮绑定事件
            var but = document.getElementsByTagName("button");
            for (var i = 0; i < but.length; i++) {
                but[i].onclick = function () {
                    flag = !flag;
                    var row = this.getAttribute("row");
                    var cols = this.getAttribute("cols");
                    if (flag) {
                        this.innerHTML = "●"
                        this.style.color = "red";
                        this.className=""
                        prepare[row][cols] = "1"

                    } else {
                        this.innerHTML = "■"
                        this.style.color = "green";
                        prepare[row][cols] = "2"
                    }
                    this.onclick = undefined;//去掉按钮的点击事件
                    var result = checkIsSuccess(prepare, row, cols, flag);
                    // alert(result)
                    //检查是否成功
                    if(result){
                        setTimeout(function () {
                            if (flag) {
                                alert("红方获胜");
                            } else {
                                alert("绿方获取");
                            }
                        },1);//解决先弹窗后显示样式的Bug
                        deleteEvent();
                    }

                }
            }
        }

        function deleteEvent(){
            var but = document.getElementsByTagName("button");
            for (var i = 0; i < but.length; i++) {
                but[i].onclick = undefined;//去掉事件
            }
        }
    </script>
</head>
<body>
<div id="content">

</div>

</body>
</html>